<template>
    <div>
        <Shortcut></Shortcut>
        <div class="order">
            <div class="header">
                <div class="title">
                    <div class="logo">
                        <Logo></Logo>
                    </div>
                    <div class="shop-name">慕西商城</div>
                    <div class="name">结算页</div>
                </div>
            </div>
            <div class="title-text">填写并核对订单信息</div>
            <div class="order-info">
                <div>
                    <div class="step-title">
                        <h3>收货人信息</h3>
                    </div>
                    <div class="add-address">
                        新增收货地址
                    </div>
                </div>
            </div>
            <!-- 这里是需要循环的地方 -->
            <div class="step-context" v-for="(item,index) in allAddresses" :key="index">
                <span class="address-name" :class="{selected:item.selected}" @click="changeSelected(item.id)">{{ item.signer_name }}</span>
                <span class="address-info">{{ item.signer_address }}</span>
                <span class="address-phone">{{ item.telphone }}</span>
                <span class="address-default" v-show="item.default == 1">默认地址</span>
            </div>
            <hr>
            <div class="step-title">
                <h3>支付方式</h3>
            </div>
            <div class="step-context">
                <div class="pay-mode selected">支付宝支付</div>
            </div>
            <hr>
            <div class="step-title">
                <h3>送货清单</h3>
            </div>
            <div class="step-context-two">
                <!-- 左边 -->
                <div class="post-mode">
                    <div>配送方式</div>
                    <div class="selected">慕西快递</div>
                    <div>标准达: <i>预计 6月1日[周四] 09:00-15:00 送达</i></div>
                </div>
                <!-- 右边 -->
                <div class="goods-list">
                    <!-- 这里需要循环 -->
                    <div v-for="(item,index) in goodsInfo" :key="index">
                        <div class="goods-shop-name">
                            商家:{{ item.shop_name }}
                        </div>
                        <div>
                            <img :src="item.image" alt="">
                            <span class="goods-name">{{ item.name }}</span>
                            <span class="goods-price">&yen;{{ item.p_price }}</span>
                            <span class="goods-num">x{{ item.goods_num }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="trade-foot">
                <span>应付金额:</span>
                <span class="count-price">&yen;{{orderAmount}}</span>
            </div>

            <div class="commit-order">
                <div class="commit-order-button" @click="submitOrder">提交订单</div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import Logo from '@/components/common/Logo.vue'
    import Shortcut from '@/components/common/Shortcut.vue'
    import { onMounted } from 'vue'
    // 查询所有地址
    import { getAllAddressesData } from '@/network/address'
    // 通过订单号查询订单
    import { getAllOrdersByTrandeNo,updateOrderInfoData } from '@/network/order'
    import { ref } from 'vue'
    import { useRoute,useRouter } from 'vue-router'

    const route = useRoute()
    const router = useRouter()


    let allAddresses = ref()
    let goodsInfo = ref()
    let tradeNo = ref()
    let orderAmount = ref(0)
    let selectedAddressId = ref()

    onMounted(() => {
        tradeNo.value = route.params.trade_no

        getAllAddressesData().then(res => {
            allAddresses.value = res
            allAddresses.value.forEach(element => {
                    if(element.default == 1) {
                        element.selected = true
                        selectedAddressId.value = element.id
                    }else {
                        element.selected = false
                    }
            })
        })

        getAllOrdersByTrandeNo(tradeNo.value).then(res => {
            goodsInfo.value = res.order_info
            orderAmount.value = res.order_amount
            console.log(goodsInfo.value)
        })

    })

    

    const changeSelected = (id) => {
        allAddresses.value.forEach(item => {
            if(item.id === id) {
                item.selected = true
                selectedAddressId.value = id
            }else {
                item.selected = false
            }
        })
    }



    const submitOrder = () => {
        let updateData = ref({
            address_id:selectedAddressId.value,
            trade_no:tradeNo.value,
            pay_status:1
        })

        updateOrderInfoData(updateData.value).then(res => {
            router.push({
                name:'OrderPay',
                query:{
                    tradeNo:tradeNo.value,
                    orderAmount:orderAmount.value
                }
            })
        })
    }


</script>

<style lang="less" scoped>
    .order {
        width: var(--content-width);
        margin: 0 auto;
        .header {
            // border-bottom: 2px solid #f00c0c;
            height: 120px;
            line-height: 120px;
        }
        .main-menu {
            background-color: #f5f5f5;
            .content {
                width: var(--content-width);
                margin: 0 auto;
                display: flex;
                .left-menu {
                    margin-top: 20px;
                    color: #333;
                    font-size: 14px;
                    height: 800px;
                    div {
                        margin-top: 20px;
                        border-bottom: 1px solid #f5f5f5;
                        &:hover {
                            cursor: pointer;
                            color: #f00c0c;
                            border-bottom: 1px solid #f00c0c;
                        }
                    }
                }
                .right-menu {
                    margin-top: 40px;
                    margin-left: 20px;
                    //background-color: #fff;
                }
            }
            .active_menu {
                color: #f00c0c;
            }
        }


        .title-text {
            line-height: 42px;
            height: 42px;
            font-size: 16px;  
        }

        .order-info {
            border: 1px solid #f0f0f0;
            margin-top: 20px;
            
            >div {
                display: flex;
                justify-content: space-between;
            }
            .step-title {
                height: 40px;
                line-height: 40px;
                padding-left: 20px;
                h3 {
                    font-weight: 700;
                    font-size: 14px;
                }
            }
            .add-address {
                padding-right: 20px;
                // padding-top: 10px;
                line-height: 40px;
                color: #005ea7;
                &:hover {
                    cursor: pointer;
                    color: #df0000;
                }
            }
        }

        .step-context {
            padding-left: 20px;
            .address-name {
                margin-top: 10px;
                width: 145px;
                height: 30px;
                display: inline-block;
                border: 2px solid #ddd;
                line-height: 30px;
                text-align: center;
                margin-bottom: 15px;
                &:hover {
                    cursor: pointer;
                }
            }
            .address-info {
                margin-left: 30px;
            }
            .address-phone {
                margin-left: 30px;
            }
            .address-default {
                margin-left: 30px;
                background-color: #999;
                color: white;
                width: 60px;
                height: 25px;
                display: inline-block;
                line-height: 25px;
                text-align: center
            }
        }
        hr {
            width: 1160px;
            border: 1px solid #f0f0f0;
        }

        .step-title {
                height: 40px;
                line-height: 40px;
                padding-left: 20px;
                h3 {
                    font-weight: 700;
                    font-size: 14px;
                }
            }
        

        
        .pay-mode {
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 2px solid #f0f0f0;
            &:hover {
                cursor: pointer;
                border: 2px solid #df0000;
            }
        }
        .selected {
            // 增加权重
            border: 2px solid #df0000 !important;
            background-image: url('@/assets/images/order/address-selected.png');
            background-position: 103%;
            background-repeat: no-repeat;
            background-size: 35px;
        }

        .step-context-two {
            display: flex;
            .goods-list {
                background-color: #f3fbfe;
                width: 780px;
                // flex: 1;
                .goods-shop-name {
                    margin-top: 10px;
                    margin-left: 20px;
                    font-weight: 700;
                }
                img {
                    background-color: white;
                    width: 85px;
                    height: 85px;
                    margin-top: 10px;
                    margin-left: 20px;
                    border: 1px solid #f0f0f0;
                }
                .goods-name {
                    display: inline-block;
                    width: 500px;
                    margin-left: 20px;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2;

                }
                .goods-price {
                    margin-left: 20px;
                    color: #f00c0c;
                    font-weight: 700;
                }
                .goods-num {
                    margin-left: 20px;
                }
            }
        }

        .post-mode {
            background-color: #f7f7f7;
            padding: 10px 0px 10px 20px;
            width: 350px;

            div:nth-child(1) {
                font-weight: 700;
            }
            div:nth-child(2) {
                margin-top: 20px;
                font-weight: 700;
                width: 145px;
                height: 30px;
                line-height: 30px;
                text-align: center;
            }
            div:nth-child(3) {
                margin-top: 20px;
            }
        }

        .trade-foot {
            background-color: #f4f4f4;
            margin-top: 30px;
            height: 50px;
            line-height: 50px;
            text-align: right;
            padding-right: 40px;
            .count-price {
                margin-left: 30px;
                color: #f00c0c;
                font-size: 16px;
                font-weight: 700;
            }
        }
        .commit-order {
            margin-top: 10px;
            margin-bottom: 30px;     
            margin-right: 40px;
            display: flex;
            justify-content: right;
            .commit-order-button {
                width: 135px;
                height: 35px;
                border: 1px solid;
                text-align: center;
                line-height: 35px;
                font-size: 16px;
                background-color: #f00c0c;
                color: white;
                border-radius: 5px;
                &:hover {
                    cursor: pointer;
                }
            }
        }

    }









    .title {
            display: flex;
            width: 1000px;
            margin: 0 auto;
            // border: 1px solid;
            height: 80px;
            line-height: 80px;

            .logo {
                // border: 1px solid;
                height: 40px;
            }
            .shop-name {
                font-size: 40px;
                font-weight: 700;
                margin-left: 10px;
                margin-top: 30px;
                color: #f00c0c;
            }
            .name {
                font-size: 25px;
                margin-left: 10px;
                margin-top: 30px;
            }
        }


</style>